<!-- 车型管理 -->
<template>
  <div class="dashboard-container car-models customer-list-box">
    <el-card
      shadow="never"
      class="search-box"
    >
      <el-form
        ref="taskSearchFormData"
        :model="searchForm"
        label-width="80px"
      >
        <el-row :gutter="60">
          <el-col :span="8">
            <el-form-item
              label="车型编号:"
              style="margin-bottom: 0px"
            >
              <el-input
                v-model="searchForm.id"
                clearable
                placeholder="请输入车型编号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="应载重量:"
              style="margin-bottom: 20px"
              label-width="110px"
            >
              <el-select
                v-model="searchForm.allowableLoad"
                clearable
                placeholder="请选择应载重量"
              >
                <el-option
                  v-for="item in loadLeavelsform"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="应载体积:"
              style="margin-bottom: 20px"
              label-width="110px"
            >
              <el-select
                v-model="searchForm.allowableVolume"
                clearable
                placeholder="请选择应载体积"
              >
                <el-option
                  v-for="item in volumeLeavelsform"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="车辆类型:"
              style="margin-bottom: 0px"
            >
              <el-input
                v-model="searchForm.name"
                clearable
                placeholder="请输入车辆类型"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button
              type="warning"
              @click="handleFilter"
            >搜索</el-button>
            <el-button
              plain
              class="reset-btn"
              @click="resetForm"
            >重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card
      shadow="never"
      class="box-card"
    >
      <el-button
        type="warning"
        class="newBtn"
        @click="handleDispatch"
      >新增车型</el-button>
      <el-table
        ref="carModelsTable"
        :data="tableData"
        fit
        style="width: 100%"
        :header-cell-style="{ background: 'rgba(250,252,255,1)' }"
      >
        <el-table-column
          align="center"
          type="index"
          label="序号"
          width="52"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="id"
          label="车型编号"
          width="202"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="车辆类型"
          width="109"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="num"
          label="车型数量"
          width="83"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="allowableLoad"
          label="应载重量(吨)"
          width="130"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="allowableVolume"
          label="应载体积(立方米)"
          width="162"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="measureLong"
          label="长(米)"
          width="83"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="measureWidth"
          label="宽(米)"
          width="83"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="measureHigh"
          label="高(米)"
          width="83"
        >
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          width="140"
        >
          <template slot-scope="scope">
            <el-link
              type="primary"
              @click="change(scope.row)"
            >编辑</el-link>
            <el-divider direction="vertical" />
            <el-link
              type="danger"
              @click="del(scope.row.id)"
            >删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :current-page="searchForm.page"
          :page-sizes="[5,10, 20]"
          :page-size="searchForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </el-card>

    <el-dialog
      :title="typeform.id?'编辑车型':'新增车型'"
      :visible.sync="dialogVisible"
      width="600px"
      :before-close="handleClose"
      class="add-form-dialog"
    >
      <el-form
        ref="typeform"
        :model="typeform"
        :rules="Dialogrules"
        label-width="80px"
        label-position="right"
      >
        <el-form-item
          label="车辆类型"
          prop="name"
        >
          <el-input
            v-model="typeform.name"
            placeholder="请输入车辆类型"
            style="width: 400px; height: 40px;"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="应载重量"
          prop="allowableLoad"
        >
          <el-input
            v-model.number="typeform.allowableLoad"
            placeholder="请输入应载重量"
            style="width: 400px; height: 40px;"
          >
            <span
              slot="suffix"
              style="
                    color: #20232a;
                    font-weight: 400;
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    margin-right: 14px;
                  "
            >吨
            </span>
          </el-input>
        </el-form-item>
        <el-form-item
          label="应载体积"
          prop="allowableVolume"
        >
          <el-input
            v-model.number="typeform.allowableVolume"
            :disabled="true"
            placeholder="请输入应载体积"
            style="width: 400px; height: 40px;"
          >
            <span
              slot="suffix"
              style="
                    color: #20232a;
                    font-weight: 400;
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    margin-right: 14px;
                  "
            >立方
            </span>
          </el-input>
        </el-form-item>
        <el-form-item
          label="长"
          prop="measureLong"
        >
          <el-input
            v-model.number="typeform.measureLong"
            placeholder="请输入长"
            style="width: 400px; height: 40px;"
          >
            <span
              slot="suffix"
              style="
                    color: #20232a;
                    font-weight: 400;
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    margin-right: 14px;
                  "
            >米
            </span>
          </el-input>
        </el-form-item>
        <el-form-item
          label="宽"
          prop="measureWidth"
        >
          <el-input
            v-model.number="typeform.measureWidth"
            placeholder="请输入宽"
            style="width: 400px; height: 40px;"
          >
            <span
              slot="suffix"
              style="
                    color: #20232a;
                    font-weight: 400;
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    margin-right: 14px;
                  "
            >米
            </span>
          </el-input>
        </el-form-item>
        <el-form-item
          label="高"
          prop="measureHigh"
        >
          <el-input
            v-model.number="typeform.measureHigh"
            placeholder="请输入高"
            style="width: 400px; height: 40px;"
          >
            <span
              slot="suffix"
              style="
                    color: #20232a;
                    font-weight: 400;
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    margin-right: 14px;
                  "
            >米
            </span>
          </el-input>
        </el-form-item>
        <el-form-item
          style="text-align: center;"
          label-width="0px"
        >
          <el-button
            style="height: 40px; width: 90px;"
            @click="cancelForm()"
          >取消</el-button>
          <el-button
            type="danger"
            style="height: 40px;width: 90px;"
            @click="submitForm('typeform')"
          >确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { carModelsListAPI, newCarModelAPI, changeCarModelAPI, delcarModelAPI } from '@/api/car-models'
export default {
  data() {
    return {
      // 载重等级列表
      loadLeavelsform: [
        'RANGE_LEVEL_1',
        'RANGE_LEVEL_2',
        'RANGE_LEVEL_3',
        'RANGE_LEVEL_4',
        'RANGE_LEVEL_5',
        'RANGE_LEVEL_6'
      ],
      volumeLeavelsform: [
        'RANGE_LEVEL_1',
        'RANGE_LEVEL_2',
        'RANGE_LEVEL_3',
        'RANGE_LEVEL_4',
        'RANGE_LEVEL_5',
        'RANGE_LEVEL_6',
        'RANGE_LEVEL_7',
        'RANGE_LEVEL_8'
      ],
      tableData: [],
      searchForm: {
        allowableLoad: '', // 车型载重
        allowableVolume: '', // 车型体积
        id: '', // 车型id
        name: '', // 车辆类型名称
        page: 1, // 当前页
        pageSize: 10 // 每页行数
      },
      total: 0, // 总数
      dialogVisible: false,
      typeform: {
        allowableLoad: '', // 准载重量
        allowableVolume: '', // 准载体积
        measureLong: 0, // 长
        measureWidth: 0, // 宽
        measureHigh: 0, // 高
        name: ''// 车辆类型名称
      },
      Dialogrules: {

        allowableLoad: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value) {
                if (Number(value)) {
                  if (+value <= 0) {
                    callback(
                      new Error('请输入正数')
                    )
                  } else {
                    callback()
                  }
                } else {
                  callback(
                    new Error('请输入正数')
                  )
                }
              } else {
                callback(new Error('请输入准载重量'))
              }
            },
            trigger: 'blur'
          }
        ],
        allowableVolume: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value) {
                if (Number(value)) {
                  if (+value <= 0) {
                    callback(
                      new Error('请输入正数')
                    )
                  } else {
                    callback()
                  }
                } else {
                  callback(
                    new Error('请输入正数')
                  )
                }
              } else {
                callback(new Error('请输入准载体积'))
              }
            },
            trigger: 'blur'
          }
        ],
        measureLong: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value) {
                if (Number(value)) {
                  if (+value <= 0) {
                    callback(
                      new Error('请输入正数')
                    )
                  } else {
                    callback()
                  }
                } else {
                  callback(
                    new Error('请输入正数')
                  )
                }
              } else {
                callback(new Error('请输入长'))
              }
            },
            trigger: 'blur'
          }
        ],
        measureWidth: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value) {
                if (Number(value)) {
                  if (+value <= 0) {
                    callback(
                      new Error('请输入正数')
                    )
                  } else {
                    callback()
                  }
                } else {
                  callback(
                    new Error('请输入正数')
                  )
                }
              } else {
                callback(new Error('请输入宽'))
              }
            },
            trigger: 'blur'
          }
        ],
        measureHigh: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value) {
                if (Number(value)) {
                  if (+value <= 0) {
                    callback(
                      new Error('请输入正数')
                    )
                  } else {
                    callback()
                  }
                } else {
                  callback(
                    new Error('请输入正数')
                  )
                }
              } else {
                callback(new Error('请输入高'))
              }
            },
            trigger: 'blur'
          }
        ],
        name: [
          { required: true, message: '请输入车辆名称', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    allowableVolume: {
      get() {
        return (this.typeform.measureLong * this.typeform.measureWidth * this.typeform.measureHigh) || (0.0)
      },
      set() {
      }

    }
  },
  watch: {
    allowableVolume: {
      immediate: true,
      handler(newValue) {
        this.typeform.allowableVolume = newValue
      }

    }
  },
  async created() {
    await this.getcarModelsList()
  },
  methods: {
    // 获取车辆类型信息列表
    async getcarModelsList() {
      const res = await carModelsListAPI(this.searchForm)
      console.log(res)
      this.total = +res.data.counts
      this.tableData = res.data.items
    },
    // 每页数量变化
    async handleSizeChange(val) {
      this.searchForm.page = 1
      this.searchForm.pageSize = val
      await this.getcarModelsList()
    },
    // 当前页变化
    async handleCurrentChange(val) {
      this.searchForm.page = val
      await this.getcarModelsList()
    },
    // 按照条件搜索
    async handleFilter() {
      this.searchForm.page = 1
      await this.getcarModelsList()
    },
    // 重置
    async resetForm() {
      this.searchForm = {
        allowableLoad: '', // 车型载重
        allowableVolume: '', // 车型体积
        id: '', // 车型id
        name: '', // 车辆类型名称
        page: 1, // 当前页
        pageSize: 10 // 每页行数
      }
      await this.getcarModelsList()
    },
    // 打开弹窗
    handleDispatch() {
      this.dialogVisible = true
    },
    // 关闭弹窗
    handleClose() {
      this.typeform = {
        allowableLoad: '', // 准载重量
        allowableVolume: '', // 准载体积
        measureLong: 0, // 长
        measureWidth: 0, // 宽
        measureHigh: 0, // 高
        name: ''// 车辆类型名称
      }
      this.dialogVisible = false
    },
    // 提交车型数据
    async newcarModel() {
      if (this.typeform.id) {
        // 编辑车型流程
        const res = changeCarModelAPI(this.typeform)
        console.log('提交结果', res)
      } else {
      // 新增车型流程
        const res = await newCarModelAPI(this.typeform)
        console.log('提交结果', res)
      }
    },
    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          alert('submit!')
          await this.newcarModel()
          this.cancelForm()
          await this.getcarModelsList()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 取消
    cancelForm() {
      this.handleClose()
    },
    // 删除模板逻辑
    del(id) {
      this.$confirm('确定要删除车型吗?', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await delcarModelAPI(id).then(async (res) => {
            // 异常不处理，信息不外抛。。。。
            if (String(res.code) === '200') {
              this.$message.success('删除成功')
              await this.getcarModelsList()
              this.dialogVisible = false
            } else {
              this.$message.error(res.msg || '删除失败')
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 编辑模板逻辑
    change(row) {
      this.typeform = row
      console.log('编辑', this.typeform)
      this.handleDispatch()
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-dialog__wrapper {
    ::v-deep .el-dialog__body {
      padding:40px 60px;
      font-size: 14px;
    }
  }
.car-models {
  .search-box{
    margin: 30px;
    width: 1190px;
    ::v-deep .el-card__body{
      padding: 30px;
      .el-button{
        width: 90px;
        height: 40px;
      }
    }
  }
  .box-card{
    margin: 30px;
    width: 1190px;
    ::v-deep .el-card__body{
      padding: 30px;
      .newBtn{
        margin-bottom: 35px;
      }
      .el-table{
        tr .cell {
            text-align: center;
        }
        tr th:first-child .cell,
        tr td:first-child .cell {
            padding-left: 0;
        }

        .el-table-column{
          .el-button{
            display: inline-block;
          }
        }
      }

    }

  }
}
</style>
